<script setup>
import Form1 from "./stepForm/Form1.vue";
import Form2 from "./stepForm/Form2.vue";
import Form3 from "./stepForm/Form3.vue";
import Form4 from "./stepForm/Form4.vue";
import Form5 from "@/views/createCommodity/stepForm/Form5.vue";
import Form6 from "@/views/createCommodity/stepForm/Form6.vue";
import Form7 from "@/views/createCommodity/stepForm/Form7.vue";
import { useCreate } from "@/store/useCreate.js";
import { ElMessage } from "element-plus";
import { addUpdateGoods } from "@/api/goods.js";
import { useRouter } from "vue-router";
import { ref } from "vue";
import { storeToRefs } from "pinia";

const createStore = useCreate();
const router = useRouter();
const { openTrialVersion } = storeToRefs(createStore);
createStore.getTypeList();
//
const updateLoading = ref(false);
const formConfirm = async () => {
  updateLoading.value = true;
  try {
    const formParams = JSON.parse(JSON.stringify(createStore.formData));
    if (!openTrialVersion.value) {
      delete formParams.experience;
    }
    const res = await addUpdateGoods(formParams);
    if (res && res.code === 200) {
      if (createStore.formData.id) {
        ElMessage.success("商品编辑成功，等待审核！");
        await router.push("/goodsManage");
      } else {
        ElMessage.success("商品创建成功，等待审核！");
        await router.push("/goodsManage");
      }
    } else {
      ElMessage.error(res.msg);
    }
    updateLoading.value = false;
  } catch (e) {
    ElMessage.error(e.message);
    updateLoading.value = false;
  } finally {
    updateLoading.value = false;
  }
};
</script>

<template>
  <div class="create-form" v-loading="updateLoading">
    <KeepAlive>
      <Form1 v-if="createStore.currentStepId === 2" />
    </KeepAlive>
    <keep-alive>
      <Form2 v-if="createStore.currentStepId === 3" />
    </keep-alive>
    <keep-alive>
      <Form3 v-if="createStore.currentStepId === 5" />
    </keep-alive>
    <keep-alive>
      <Form4 v-if="createStore.currentStepId === 7" />
    </keep-alive>
    <keep-alive>
      <Form5 v-if="createStore.currentStepId === 8" />
    </keep-alive>
    <keep-alive>
      <Form6 v-if="createStore.currentStepId === 9" />
    </keep-alive>
    <keep-alive>
      <Form7 v-if="createStore.currentStepId === 11" @confirm="formConfirm" />
    </keep-alive>
  </div>
</template>

<style scoped lang="scss">
.create-form {
  flex: 1;
  height: calc(100vh - 109px);
  overflow-y: auto;
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(11, 13, 18, 0.06);
  border-radius: 16px 16px 16px 16px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  margin-left: 16px;
  padding: 20px;
  box-sizing: border-box;
}
</style>